<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- search -->
      <search-tools :simplelist="SimpleInfoList" @upLoadForSearch="upLoadForSearch" @upload="initData" />
      <!-- main -->
      <br>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <tab-tools :list="list" :totals="counts" @look="look" @checkFn="checkFn" @sell="sell" @upload="initData" />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <tab-tools :list="list" :totals="counts" @look="look" @checkFn="checkFn" @sell="sell" @upload="initData" />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <tab-tools :list="list" :totals="counts" @look="look" @checkFn="checkFn" @sell="sell" @upload="initData" />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <tab-tools :list="list" :totals="counts" @look="look" @checkFn="checkFn" @sell="sell" @upload="initData" />
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <preview ref="prev" :simple-info-list="SimpleInfoList" />
    <CheckDialog ref="check" @upload="initData" />
    <SellDialog ref="sell" @upload="initData" />
  </div>
</template>

<script>
import preview from '@/views/questions/components/preview.vue'
import searchTools from '../components/searchTools.vue'
import TabTools from './components/tabTools.vue'
import CheckDialog from './components/checkDialog.vue'
import SellDialog from './components/sellDialog.vue'
import { getChoiceList, getChoiceIdData, getSimpleInfo } from '@/api/choice'
export default {
  name: 'Choice',
  components: { searchTools, TabTools, preview, CheckDialog, SellDialog },
  data() {
    return {
      queryData: {
        page: 1,
        pagesize: 5
      },
      activeName: 'first',
      list: [],
      counts: 0,
      SimpleInfoList: [] // 学科列表
    }
  },
  created() {
    this.initData()
    this.getSimpleInfoList()
  },
  methods: {
    async initData() {
      const res = await getChoiceList(this.queryData)
      const { items, counts } = res
      this.list = items
      this.counts = counts
    },
    // tab切换
    handleClick(a) {
      console.log(a)
      if (a.index === '0') {
        this.queryData = {
          page: 1,
          pagesize: 5
        }
        this.initData()
      }
      if (a.index === '1') {
        this.queryData = { ...this.queryData, chkState: 0 }
        this.initData()
      }
      if (a.index === '2') {
        this.queryData = { ...this.queryData, chkState: 1 }
        this.initData()
      }
      if (a.index === '3') {
        this.queryData = { ...this.queryData, chkState: 2 }
        this.initData()
      }
    },
    handleSizeChange(val) {
      this.queryData.pagesize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // 显示预览
    async look(e) {
      this.$refs.prev.p_isShow = true
      const res = await getChoiceIdData(e.id)
      this.$refs.prev.titleInfo = res
    },
    // 显示审核
    async  checkFn(e) {
      this.$refs.check.checkShow = true
      this.$refs.check.formData['id'] = e.id
    },
    // 显示上下架
    sell(e) {
      this.$refs.sell.sellShow = true
      const { id, publishState } = e
      this.$refs.sell.sellInfo.id = id
      this.$refs.sell.sellInfo.publishState = publishState
    },
    // 学科列表
    async getSimpleInfoList() {
      const res = await getSimpleInfo()
      console.log(res)
      this.SimpleInfoList = res
    },
    // 条件搜索
    async upLoadForSearch(e) {
      const res = await getChoiceList({ ...e, ...this.queryData })
      const { items, counts } = res
      this.list = items
      this.counts = counts
    }
  }
}
</script>

<style></style>
